<template>
	<view class="budget-main">
		<view :style="{ height: statusBarHeight}"></view>
		<view class="budget-total">
			<view class="budget-total-left">
				<view class="left-title">
					总预算
				</view>
				<view class="left-text flex" style="align-items: center;justify-content: center;">
					{{'总额: ' + formatMoney(total) + ' | ' + '支出: ' + formatMoney(costTotal)}}
				</view>
			</view>
			<view class="budget-total-right">
				<wd-circle :strokeWidth="8" :speed="150" v-model="current" :size="72" :color="costTotal< total ? '#1C64FD' : 'red'">
					<view class="flex" style="align-items: center;justify-content: center;flex-direction: column;">
						<view style="font-size: 12px;color: #6a6a6a;">
							剩余
						</view>
						<view style="font-size: 12px;color: #6a6a6a;">
							{{formatMoney(total - costTotal)}}
						</view>
					</view>
				</wd-circle>
			</view>
		</view>
		<view class="budget-list">
			<view class="budget-list-item">
				<view>
					<view class="left-title">
						分类预算
					</view>
					<view class="left-text">
						{{'总额:' + formatMoney(total)}}
					</view>
				</view>
				<view>
					<uni-icons @click="addBudget" type="plusempty" style="margin-right: 10px;" color="#9c9c9c"
						size="24"></uni-icons>
				</view>
			</view>
			<view v-for="(item,index) in budgetList" :key="index">
				<uni-swipe-action-item :right-options="options" @click="onClick($event,item)">
					<view class="budget-list-item">
						<view class="flex">
							<text class="iconfont rounded-50p p-12 mb-4" style="font-size: 24px"
								:style="{color:'black',backgroundColor:'rgba(238, 238, 238,.4)'}"
								:class="item.icon"></text>
							<view style="margin-left: 15px;">
								<view style="font-size: 18px;">
									{{item.title}}
								</view>
								<view class="left-text flex" style="align-items: center;justify-content: center;">
									{{formatMoney(item.costNum) + ' | '  + formatMoney(item.num)}}
								</view>
							</view>
						</view>
						<view>
							<wd-circle :strokeWidth="8" :speed="150" v-model="item.current" :color="item.costNum < item.num ? '#1C64FD' : 'red'"
								:size="62">
								<view class="flex"
									style="align-items: center;justify-content: center;flex-direction: column;">
									<view style="font-size: 12px;color: #6a6a6a;">
										剩余
									</view>
									<view style="font-size: 12px;color: #6a6a6a;">
										{{formatMoney(item.residue)}}
									</view>
								</view>
							</wd-circle>
						</view>
					</view>
				</uni-swipe-action-item>
			</view>
		</view>
		<setAccount2 :visible="showPopup" :record="record" @close="showPopup=false"
			@updateConfirm="updateRecordConfirm"></setAccount2>
	</view>
</template>

<script lang="ts" setup>
	import { computed, ref, onMounted } from 'vue'
	import wdCircle from '@/uni_modules/wot-design-uni/components/wd-circle/wd-circle.vue';
	import { onShow } from '@dcloudio/uni-app'
	import {
		getRank
	} from "../../api/api";
	import {
		formatMoney
	} from '@/common/format.js';
	
	const current = ref<number>(0)
	const showPopup = ref(false)
	const record = ref([])
	const budgetList = ref([])
	const total = ref(0)
	const costTotal = ref(0)
	const options = ref([{
		text: '删除',
		style: {
			backgroundColor: '#dd524d'
		}
	}])

	//左滑操作 编辑/删除
	const onClick = (e, obj) => {
		// 删除
		if (e && e.content.text === '删除') {
			uni.showModal({
				title: "删除",
				content: `确认删除?`,
				success: async function (res) {
					budgetList.value = budgetList.value.filter(item => item.type_id !== obj.type_id)
					uni.setStorageSync('budget_list', budgetList.value)
					initData()
				}
			})
		}
	}

	const statusBarHeight = computed(() => {
		return uni.getSystemInfoSync().statusBarHeight + 20 + 'px'
	})

	const updateRecordConfirm = (data) => {
		console.log('预算返回选择', data)
		budgetList.value.push(data)
		uni.setStorageSync('budget_list', budgetList.value)
		showPopup.value = false
		initData()
	}
	const addBudget = () => {
		showPopup.value = true
	}
	const initData = async () => {
		budgetList.value = uni.getStorageSync('budget_list') || []

		if (budgetList.value.length > 0) {
			let sum = budgetList.value.reduce((accumulator, currentValue) => {
				return accumulator + currentValue.num;
			}, 0)
			total.value = sum

			const date = new Date()
			const curDay = null;
			const curYear = date.getFullYear().toString()
			const curMon = (date.getMonth() + 1)
			// 本月支出
			const pieChartData = await getRank(0, curYear, curMon, curDay)

			const costMap = new Map()
			pieChartData.map(item => {
				costMap.set(item.type_id, item.num)
			})

			budgetList.value = budgetList.value.map(item => {
				let costNum = 0
				if (costMap.has(item.type_id)) {
					costNum = costMap.get(item.type_id)
				}
				return {
					...item,
					costNum: costNum,
					current: costNum / item.num * 100,
					residue: item.num - costNum
				}
			})
			costTotal.value = budgetList.value.reduce((accumulator, currentValue) => {
				return accumulator + currentValue.costNum;
			}, 0)
			current.value = costTotal.value / total.value * 100
			console.log('budgetList.value', budgetList.value, pieChartData)
			console.log('current.value', current.value)
		}
	}
	onShow(async () => {
		initData()
	})
</script>


<style lang="scss">
	.left-title {
		font-size: 20px;
		font-weight: 700;
	}

	.left-text {
		font-size: 15px;
		color: #ccc;
	}

	.budget-main {
		padding: 10px;
		background-color: #f4f4f4;

		.budget-total {
			// width: calc(100vw - 20px);
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			padding: 10px;
			border-radius: 10px;
			margin-bottom: 20px;

			.budget-total-right {
				width: 80px;
				height: 80px;
			}
		}

		.budget-list {
			background-color: #fff;
			border-radius: 10px;
			padding: 10px;
			padding-bottom: 0;

			.budget-list-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 10px;
				// border-bottom: 1px solid #ccc;
			}
		}
	}
</style>